<template>
  <div class="all">
  <div id="fill">    
    <div>
      <div class="title">{{title}}</div>
      <div class="description">{{description}}</div>
      <div class="result">
        <div class="private">
          <div class="show"><span class="sumData">得分：</span>{{grade}}</div>
          <div class="show"><span class="sumData">第</span>{{rank}}<span class="sumData">名</span>  </div>
          <div class="show"><span class="sumData">答对</span>{{correctNum}}<span class="sumData">题</span></div>
        </div>
        <div class="public">
          <div class="show"><span class="sumData">总分</span>{{sum}}</div>
          <div class="show">{{count}}<span class="sumData">人填写</span></div>
          <div class="show"><span class="sumData">共</span>{{length}}<span class="sumData">题</span></div>
        </div>
      </div>
      <div v-for="(question, index) in questions">
        <div v-if="gettype(question) == 1">
          <exam-radio  
          :no="getno(index)"
          :question="question"
          >
          </exam-radio>
        </div>
        
        <div v-else-if="gettype(question) == 3">
          <exam-check-box 
          :no="getno(index)"
          :question="question"
          >
          </exam-check-box>
        </div>
        
        <div v-else-if="gettype(question) == 5">
          <exam-completion
          :no="getno(index)"
          :question="question"
          >
          </exam-completion>
        </div>
      </div>
    </div>
    
  </div>
  </div>
</template>

<script>
import ExamRadio from './question/ExamRadio.vue'
import ExamCheckBox from './question/ExamCheckBox.vue'
import ExamCompletion from './question/ExamCompletion.vue'
import axios from "axios"
import qs from "qs"
export default {
  name:'GradeShow',
  components: {
    ExamCheckBox,
    ExamCompletion,
    ExamRadio
  },
  data(){
   return {
    rank: 0,
    questions: [
      // {
      //   title: '单选',
      //   isFinish: true,
      //   isNecessary: true,
      //   type: 'radio',
      //   qtype: null,
      //   grade: 5,
      //   resolution:'123',
      //   options: [
      //     {
      //       text: '12',
      //       isChoosed: true,
      //       isCorrect: false,
      //       description: '123'
      //     },
      //     {
      //       text: '123',
      //       isChoosed: false,
      //       isCorrect: true,
      //       description: '1234'
      //     },
      //   ]

      // },
      // {
      //   title: '多选',
      //   isFinish: true,
      //   isNecessary: true,
      //   type: 'checkbox',
      //   qtype: 'exam',
      //   grade: 5,
      //   resolution:'',
      //   options: [
      //     {
      //       text: '12',
      //       isChoosed: false,
      //       isCorrect: true,
      //       description: '123'
      //     },
      //     {
      //       text: '123',
      //       isChoosed: true,
      //       isCorrect: true,
      //       description: '1234'
      //     },
      //   ]

      // },
      // {
      //   title: '填空',
      //   isFinish: true,
      //   isNecessary: true,
      //   type: 'completion',
      //   qtype: 'exam',
      //   grade: 5,
      //   resolution:'123',
      //   content: 'nihao',
      //   correctAnswer: 'nihao'
      // },
    ],
    time: '',
    sum: 0,
    isAutoLabel: true,
    title: '标题',
    description: '描述',
    grade: 0,
    correctNum: 0,
    count: 0,
    length: 0,
   }
  },
  destroyed() {
  },
  created: function (){
    this.getGradeData()
  },
  methods: {
    gettype(question) { 
      switch(question.type){
        case 'radio':
          return 1
        case 'checkbox':
          return 3
        case 'completion':
          return 5
      } 
    },

    getno(index) {
      if(!this.isAutoLabel) {
        return 0
      }else{  
        return index+1
      }
    },

    getdata(res) {
      return res.data.data
    },

    getRadio(question) {
      if(question.answer == null) {
        return null
      }else {
        return question.answer[0]
      }
      // if(question.optionId != null) {
      //   return question.optionId
      // }
      // question.options.forEach(option => {
      //   if(option.isDefault) {
      //     question.optionId = option.id
      //     this.changeRadio(question)
      //     return question.optionId
      //   }
      // });
      
    },

    getScore(question) {
      if(question.answer == null) {
        return 0
      }else {
        for(let option of question.options) {
          if(option.id == question.answer[0]) {
            return option.score
          }
        }
      }
    },

    getCheckBox(question) {
      return question.answer
      // if(question.optionIds != null) {
        
      //   return question.optionIds
      // }
      // question.optionIds = []
      // question.options.forEach(option => {
      //   if(option.isDefault) {
      //     question.optionIds.push(option.id)
      //   }
      // });   
      // this.changeCheckBox(question)
      // return question.optionIds
    },

    getInput(question) {
      if(question.content != null) {
        return question.content
      }else{
        return ''
      }
    },

    getQuestionnaireData() {
      let data = {
        id: this.userId,
        questionnaireId: this.id,
        uuid: this.uuid,
      }
      axios.post('/api/fill/getq',qs.stringify(data)).then(res => {
        console.log(res.data.data);
        if(res.data.code == 0) {
          this.questions = this.getdata(res)['questions']
        }else {
          console.log(res)
        }
      })
    },

    getGradeData() {
      let data = {
        recordId: this.recordId
      }
      console.log(data);
      axios.post('/api/questionnaire/userRecord',qs.stringify(data)).then(res => {
        if(res.data.code == 0) {
          console.log(res.data.data);
          this.time = this.getdata(res)['time']
          this.rank = this.getdata(res)['rank']
          this.count = this.getdata(res)['count']         
          // this.grade = this.getdata(res)['grade']
          this.questions = this.getdata(res)['questions']
          this.title = this.getdata(res)['title']
          this.description = this.getdata(res)['description']
          this.isAutoLabel = this.getdata(res)['isAutoLabel']
          this.getSumDate()
        }else{
          console.log(res);
        }
      })
    },

    getSumDate() {
      for(let question of this.questions) {
        this.sum += question.grade
        console.log(this.sum);
        if(question.qtype == 'exam'){
          this.length++
          switch(question.type) {
            case 'radio':
            case 'checkbox':
              let correct = true
              for(let option of question.options) {
                if(option.isCorrect != option.isChoosed) {
                  correct = false
                }
              }
              console.log(correct);
              if(correct){
                this.correctNum += 1
                this.grade += question.grade
              }
              break
            case 'completion':
              if(question.content == question.correctAnswer) {
                this.correctNum += 1
                this.grade += question.grade
              }
              break
          }
        }
        
      }
    }
  },
  computed:{
    recordId(){
      console.log(parseInt(this.$route.query.recordId));
      return parseInt(this.$route.query.recordId)
    },
  }
}
</script>

<style scoped src='assets/css/fillcss/fill.css'>
</style>
